<template>
    <form @submit="submit" class="profile">
        <view class="user_avatar flex-center">
            <view class="image_avatar" @tap="chooseImage">
                <image :src="userInfo?.avatar" mode="widthFix" />
                <view class="refresh_icon">
                    <image src="/static/refresh.png" mode="widthFix" />
                </view>
            </view>
        </view>
        <view class="user_detail">
            <view class="flex-start user_item">
                <text>昵称</text>
                <input name="nickname" placeholder="请输入昵称" :value="userInfo?.nickname" type="text" />
            </view>
            <view class="flex-start user_item">
                <text>手机</text>
                <view class="phone_info flex-start">
                    <input name="phone" type="text" :value="userInfo?.phone" readonly />
                    <button class="phone_btn">更换手机号</button>
                </view>
            </view>
            <view class="flex-start user_item">
                <text>性别</text>
                <picker name="gender" @change="changeGender" :value="userInfo?.gender" :range="genderArray">
                    {{ genderArray[userInfo.gender] }}
                </picker>
            </view>
            <view class="flex-start user_item">
                <text>生日</text>
                <picker name="birthday" mode="date" :value="userInfo.birthday" start="1900-01-01"
                    :end="moment().format('YYYY-MM-DD')" @change="changeBirthday">
                    {{ userInfo.birthday }}
                </picker>
            </view>
        </view>
        <view class="tips">性别及生日信息保存后无法重新修改，请谨慎填写</view>
        <button class="save_btn" form-type="submit">保存</button>
    </form>
</template>
<script setup lang="ts">
import request, { requestUploadUrl } from '@/api/request';
import { ref } from 'vue';
import moment from "moment";
import type { UserInfo } from '@/types';

const genderArray = ['男', "女", "未知"]
const userInfo = ref({
    ...uni.getStorageSync('userInfo')
})
const chooseImage = () => {
    uni.chooseMedia({
        count: 1, mediaType: ["image"], sizeType: ["compressed"], success: res => {
            const tempFilePath = res.tempFiles[0].tempFilePath;
            uni.uploadFile({
                url: requestUploadUrl,
                filePath: tempFilePath,
                name: 'files',
                success(uploadRes) {
                    const data = JSON.parse(uploadRes.data);
                    userInfo.value.avatar = data.url;
                },
                fail: uploadErr => {
                    uni.showLoading({ title: "上传失败" })
                }
            })
        }, fail: err => {
            uni.showLoading({ title: "上传失败" })
        }
    })
}

const changeGender = (e: any) => {
    userInfo.value.gender = e.detail.value;
}
const changeBirthday = (e: any) => {
    userInfo.value.birthday = e.detail.value;

}
const submit = async (e: any) => {
    uni.showLoading({ title: "修改中...", mask: true })
    console.log(e.detail.value);

    await request<UserInfo>("/updateUserInfo", { ...e.detail.value, avatar: userInfo.value.avatar }, "POST")
    uni.setStorageSync("userInfo", userInfo.value)
    uni.showToast({ title: "修改成功", icon: "none" })
}
</script>
<style lang="scss">
.profile {
    background: #f6f6f6;

    .user_avatar {
        background: #fff;
        padding: 100rpx 40rpx;

        .image_avatar {
            position: relative;

            image {
                width: 120rpx;
            }

            .refresh_icon {
                width: 40rpx;
                position: absolute;
                top: -20rpx;
                right: -30rpx;
                background: #fff;
                border-radius: 50%;
                padding: 8rpx;

                image {
                    width: 100%;
                }
            }
        }
    }

    .user_detail {
        margin: 20rpx 0;
        padding: 0 30rpx;
        background: #fff;

        .user_item {
            border-bottom: 1px solid #eee;
            padding: 30rpx;

            &:last-child {
                border-bottom: 0;
            }

            text {
                padding-right: 60rpx;
                white-space: nowrap;
            }

            picker {
                flex: 1;
            }

            .phone_info {

                .phone_btn {
                    font-size: 28rpx;
                    padding: 16rpx 20rpx;
                    border-radius: 8rpx;
                    border: 1rpx solid #333;
                    white-space: nowrap;

                }
            }
        }
    }

    .tips {
        color: #999;
        font-size: 12px;
        padding: 20rpx 60rpx;
    }

    .save_btn {
        background: #214bd5;
        color: #fff;
        margin: 0 30rpx;
        margin-top: 100rpx;
        padding: 30rpx 0;
        border-radius: 8rpx;
        font-size: 32rpx;
    }
}
</style>